<template>
  <div class="box">
    <h1>作用域插槽</h1>
    <hr />
    <!-- <p>{{ todos }}</p> -->
    <ul>
      <!-- <li :style="{color:item.done?'green':'red'}" v-for="(item,index) in todos" :key="item.id">{{item.title}}</li> -->
    <li v-for="(item,index) in todos" :key='item.id'>
      <!-- 作用域插槽：可以将数据回传给父组件 -->
      <slot :$row="item" :$index="index"></slot>
    </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
//通过props接受父组件传递数据
// props接收父组件传递的数据
defineProps(['todos']);
</script>

<style scoped>
.box {
  width: 100vw;
  height: 400px;
  background: rgb(203, 232, 244);
}
</style>